<html>
<head>
    <script src="./axios.min.js"></script>
    <script src="./vue.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>hello word!!!</h1>
<p>this is a html page</p>
<div id="app">
    <button @click="up($event)">上传文件<i class="el-icon-upload el-icon--right"></i></button>
    <input
            id="uploadEventFile"
            accept="application/vnd.openxmlformatsofficedocument.spreadsheetml.sheet,application/vnd.ms-excel"
            name="fileinfo"
            type="file"
            @change="inputCustomProduct($event)"/>
</div>
<script>
    var app = new Vue({
        el: '#app',
        methods: {
            up(e) {
                e.preventDefault();
                //因为样式问题，点击button按钮触发input
                document.getElementById('uploadEventFile').trigger("click")
            },
            inputCustomProduct(e) {
                //console.log(el)
                let that = this;
                //声明一个FormDate对象
                let formData = new FormData();
                let file = e.target.files[0];
                //把文件信息放入对象中
                formData.append("file", file);
                // console.log(FormData.get("multipartFile"));
                config = {
                    headers: {
                        "Content-Type": "multipart/form-data"
                    }
                };
                axios.post('http://localhost:8888/phone/import', formData, config).then(res => {
                    //成功后调用的代码
                    console.log(res);
                }).catch(result => {
                    //失败后调用的代码
                    console.log(result)
                })
            }
        }
    })
</script>
</body>

</html>